<template>
  <el-dialog
    class="apiDialog"
    v-model="dialogVisible"
    :title="props.title"
    width="820px"
    center
    :close-on-click-modal="false"
  >
    <json-viewer
      v-if="jsonData"
      :value="jsonData"
      :expand-depth="5"
      copyable
      boxed
      :show-array-index="false"
      sort
    ></json-viewer>
    <span v-else>-</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import JsonViewer from "vue-json-viewer";
import { defineProps, defineEmits, computed } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  jsonData: {
    type: String,
    default: "",
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits([""]);

const dialogVisible = computed({
  get() {
    return props.visible;
  },
  set(value) {
    emits("closeDialog", value);
  },
});
const closeDialog = () => {
  emits("closeDialog", false);
};
</script>
<style lang="scss" scoped></style>
